<template>
    <div class="loadLog">
        <div class="search">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="导入时间">
                    <el-date-picker v-model="value" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" size='mini'>
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" size="mini">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="logData" border style="width: 100%" :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}"
            v-loading="loading" element-loading-text="加载中" element-loading-background="rgba(250, 250, 250, 0.5)"
            element-loading-spinner="el-icon-loading" :cell-style="{color:'#5a5a5a',fontSize:'12px',fontWeight:400}">
            <el-table-column prop="createTime" label="导入时间" width='180'>
            </el-table-column>
            <el-table-column prop="account" label="导入用户" width='180'>
            </el-table-column>
            <el-table-column prop="result" label="导入结果" width='180'>
                <template slot-scope="scope">
                    <div>
                        <span v-if='scope.row.result == "导入失败"' class='defeated'></span>
                        <span v-else-if='scope.row.result == "导入部分成功"' class='partSuccess'></span>
                        <span v-else class='success'></span>
                        {{ scope.row.result }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="detail" label="导入详情">
            </el-table-column>
            
            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button type="text" size="small" slot="reference" @click='lookUp(scope.row)'>查看</el-button>
                </template>
            </el-table-column>
            <div slot="empty">
                <el-empty></el-empty>
            </div>
        </el-table>
        <el-pagination
            v-if="logData.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10,20,50,100]"
            :page-size="limit"
            layout="total, prev, pager, next, sizes, jumper"
            :total="total"
            background>
        </el-pagination>
    </div>
</template>

<script>
    import {
        importLog
    } from '@/api/baseController'
    export default {
        data() {
            return {
                value: [],
                loading: false,
                logData:[],
                limit: 10,
                page: 1,
                total: 0,
                currentPage: 1
            }
        },
        created() {
            let date = new Date()
            let year = date.getFullYear()
            let month = date.getMonth() + 1
            let day = date.getDate()
            month < 10 ? month = '0' + month : ''
            day < 10 ? day = '0' + day : ''
            this.value[0] = year + '-' + month + '-' + day + ' 00:00:00'
            this.value[1] = year + '-' + month + '-' + day + ' 23:59:59'
        },
        mounted() {
            this.getImportLog()
        },
        methods: {
            getImportLog() {
                let data = {
                    limit: this.limit,
                    page: this.page,
                    type: 'processRoute',
                    startTime: this.value[0],
                    endTime: this.value[1]
                }
                this.loading = true
                this.logData = []
                importLog(data).then(res => {
                    this.loading = false
                    if(res.code == 200 && res.data) {
                        this.total = res.data.total
                        res.data.list.map(item => {
                            let result = ''
                            if((item.count != 0 && item.data.createFail == 0) || item.count == 0) {
                                result = '导入成功'
                            } else if(item.count != 0 && item.data.createSuccess == 0) {
                                result = '导入失败'
                            } else if(item.count != 0 && item.data.createSuccess != 0 && item.data.createFail != 0) {
                                result = '导入部分成功'
                            }
                            let detail = '导入成功' + item.data.createSuccess + '条,导入失败' + item.data.createFail + '条'
                            this.logData.push({
                                account: item.account,
                                createTime: item.createTime,
                                result: result,
                                detail: detail
                            })
                        })
                    }
                })
            },
            // 查询
            onSubmit() {
                this.getImportLog()
            },
            // 分页
            handleSizeChange(val) {
                this.limit = val
                this.getImportLog(this.searchForm)
            },
            handleCurrentChange(val) {
                this.page = val
                this.getImportLog(this.searchForm)
            },
            // 查看详情
            lookUp(d) {
                this.$router.push({
                    path: '/basicData/bom/logDetail',
                    query: {
                        time: d.createTime,
                        selTime: this.value
                    }
                })
            }
        },
        watch: {
            value(val) {
                if(this.value == null) {
                    this.obj[this.label[0]] = ''
                    this.obj[this.label[1]] = ''
                }else{
                    this.value[0] = val[0].dateFormat(
                        "yyyy-MM-dd 00:00:00"
                    )
                    this.value[1] = val[1].dateFormat(
                        "yyyy-MM-dd 23:59:59"
                    )
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .loadLog {
        padding: 0 20px;
        overflow: auto;
        .search {
            padding: 20px 30px;

            /deep/ .el-form-item{
                margin-bottom: 0;
            }
        }
        .defeated {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: rgb(255, 59, 48);
            border-radius: 50%;
        }
        .partSuccess {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: rgb(250, 173, 20);
            border-radius: 50%;
        }
        .success {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: rgb(2, 185, 128);
            border-radius: 50%;
        }
    }
</style>